<template>
  <div class="lego-body">
    <a-config-provider :locale="zhCN">
      <a-spin
        tip="读取中"
        class="lego-app-global-spinner"
        v-if="showGlobalSpinner"
      />
      <a-layout>
        <a-layout-header
          v-if="headerVisible"
          class="layout-header"
          :style="{
            backgroundColor: route.meta.visibilityBanner
              ? 'rgba(0, 0, 0, .8)'
              : 'rgba(0, 0, 0, 1)',
          }"
        >
          <div class="title">
            <div class="logo">
              <img src="./assets/logo-simple.png" @click="goHome" />
              <h3 v-if="route.name !== 'editor'">乐高编辑器</h3>
              <InlineEdit
                v-else
                class="inline-edit-title"
                :value="editorStore.pageData.title"
                @change="changeWorkTitleHandle"
              />
            </div>
            <div class="login">
              <EditorConfigBtn class="editor-config-btn" />
              <div class="login-btn">
                <a-button
                  v-if="!userStore.userInfo.token"
                  type="primary"
                  @click="login"
                  >登录</a-button
                >
                <a-dropdown-button v-else>
                  {{
                    userStore.userInfo.nickname || userStore.userInfo.username
                  }}
                  <template #overlay>
                    <a-menu>
                      <!-- menu项，点击跳转仓库地址 -->
                      <a-menu-item key="0">
                        <GithubOutlined />
                        <a
                          href="https://gitee.com/DhjOring/poster-lego.git"
                          target="_blank"
                          :style="{ marginLeft: '5px' }"
                          >仓库地址</a
                        >
                      </a-menu-item>

                      <a-menu-item key="1" @click="logout">
                        <LogoutOutlined />
                        退出登录
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown-button>
              </div>
            </div>
          </div>
        </a-layout-header>
        <a-layout-content
          class="content"
          :style="{
            marginTop:
              route.meta.visibilityBanner || route.name === 'login'
                ? '0'
                : '50px',
          }"
        >
          <div v-if="route.meta.visibilityBanner">
            <div class="wellcom-banner">
              <img
                class="banner-image"
                src="http://lego-express.oss-cn-shanghai.aliyuncs.com/express-test/9e39a9ee-153e-4dfc-ae5d-447122250f95/background.png"
                alt=""
              />
              <div class="banner-text">
                <h2 class="banner-title">海量精彩设计 一键生成</h2>
                <div class="banner-search">
                  <a-input-search
                    placeholder="搜索一下，快速找模板"
                    v-model:value="searchValue"
                    @search="onSearch"
                  />
                </div>
              </div>
            </div>
            <div class="wellcom-container">
              <div class="welcome-container-inner">
                <div class="container-inner-item">
                  <Html5TwoTone :style="{ fontSize: '60px' }" />
                  <h3>专注H5 始终如一</h3>
                  <p>三年保持行业领先</p>
                </div>
                <div class="container-inner-item">
                  <BuildTwoTone :style="{ fontSize: '60px' }" />
                  <h3>海量 H5 模版</h3>
                  <p>一键生成，一分钟轻松制作</p>
                </div>
                <div class="container-inner-item">
                  <BulbTwoTone :style="{ fontSize: '60px' }" />
                  <h3>极致体验</h3>
                  <p>用户的一致选择</p>
                </div>
              </div>
            </div>
            <div class="content-title">
              <div class="content-divider">
                <a-divider :style="{ fontSize: '22px', borderColor: '#d8d8d8' }"
                  >热门海报</a-divider
                >
                <p>只需替换文字和图片，一键自动生成H5</p>
              </div>
            </div>
          </div>
          <router-view></router-view>
        </a-layout-content>
        <a-layout-footer class="footer" v-if="footerVisble">
          <div>津ICP备20000929号-2</div>
        </a-layout-footer>
      </a-layout>
    </a-config-provider>
  </div>
</template>

<script setup lang="ts">
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import { computed, toRefs, watch, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  UserOutlined,
  GithubOutlined,
  LogoutOutlined,
} from '@ant-design/icons-vue'
import useUserStore from './store/modules/UserStore'
import { Html5TwoTone, BuildTwoTone, BulbTwoTone } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import useGlobalStore from './store/modules/globalStore'
import useEditorStore from './store/modules/editorStore'
import EditorConfigBtn from './components/editor-config-btn.vue'
import useTemplateStore from './store/modules/templateStore'
import InlineEdit from './components/inline-edit/inline-edit.vue'
const route = useRoute()
const router = useRouter()
const { isLoading } = toRefs(useGlobalStore())
const userStore = useUserStore()
const editorStore = useEditorStore()
const templateStore = useTemplateStore()
const headerVisible = computed(() => {
  return route.meta?.headerVisible
})

const searchValue = ref('')

const onSearch = async () => {
  await templateStore.setTemplateList(
    {
      title: searchValue.value,
      pageIndex: 0,
      pageSize: 8,
    },
    true
  )
  message.success('搜索成功')
}

watch(searchValue, (newVal) => {
  if (newVal.trim().length == 0) {
    templateStore.setTemplateList(
      {
        title: searchValue.value,
        pageIndex: 0,
        pageSize: 8,
      },
      true
    )
  }
})

const footerVisble = computed(() => {
  console.log(route.meta?.footerVisible)

  return route.meta?.footerVisible
})
const showGlobalSpinner = computed(() => {
  return isLoading.value && !route.meta?.disabledGlobalLoading
})
const changeWorkTitleHandle = (value: string) => {
  editorStore.changePageData({ key: 'title', value }, true)
}
const login = () => {
  // userStore.login({ username: 'dhjyyds', password: '123456' })
  router.push('/login')
}
const logout = () => {
  message.success('退出登录成功,2秒后跳转首页', 2)
  setTimeout(() => {
    userStore.logout()
    router.push('/login')
  }, 2000)
}
const goHome = () => {
  router.push('/')
}
watch(
  () => route.meta,
  (newVal) => {
    document.title = (newVal?.title as string) || 'lego'
  }
)
</script>

<style scoped lang="scss">
.lego-body {
  height: 100vh;
  width: 100vw;
  position: relative;
  color: rgb(255, 255, 255);
  background-color: white;
  .lego-app-global-spinner {
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 999;
  }
  .layout-header {
    position: absolute;
    z-index: 99;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .title {
    color: white;
    display: flex;
    .logo {
      flex: 3;
      display: flex;
      align-items: center;
      cursor: pointer;
      .inline-edit-title,
      h3 {
        font-size: 16px;
        font-weight: 700;
        //超出部分显示省略号
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .login {
      flex: 8;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .editor-config-btn {
        width: 300px;
        display: flex;
        justify-content: space-evenly;
      }
      .login-btn {
        width: 150px;
      }
    }
  }
  .content {
    width: 100%;
    height: 100%;
    min-height: 560px;
    .wellcom-banner {
      display: flex;
      position: relative;
      height: 450px;
      width: 100%;
      overflow: hidden;
      .banner-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .banner-text {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        .banner-title {
          color: white;
          font-weight: 700;
          text-shadow:
            0 0 1px rgba(68, 92, 116, 0.02),
            0 2px 8px rgba(57, 76, 96, 0.15);
          font-size: 2rem;
        }
        .banner-search {
          margin-top: 20px;
          width: 570px;
          height: 40px;
        }
      }
    }
    .wellcom-container {
      height: 175px;
      background-color: #f2f2f2;
      .welcome-container-inner {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        .container-inner-item {
          flex: 1;
          text-align: center;
          padding: 20px 0;
          h3 {
            margin: 5px 0;
            font-size: 19px;
            color: #333;
            font-weight: 500;
            height: 30px;
            line-height: 30px;
          }
          p {
            color: #666;
            height: 22px;
          }
        }
      }
    }
    .content-title {
      width: 1200px;
      height: 115px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      .content-divider {
        width: 305px;
      }
      p {
        text-align: center;
        font-size: 16px;
        color: #666;
      }
    }
  }
  .footer {
    background-color: rgb(51, 51, 51);
    height: 100px;
    color: rgb(255, 255, 255);
  }
}
</style>
